<template>
	<div>
		
		<div class="contact-info" :class="routerClass">
      <div class="option no-hover" v-for="item in sidebar" :key="item.id" @click="toTop(item.id)">
        <i v-if="item.id!=2&item.id!=3" :class="item.icon"></i>
				<div  v-show="item.id==2" class="chatgpt-icon">
          <img style="width: 20px;" src="../../assets/icon/ChatGPT.png" alt="">  
        </div>
				<div  v-show="item.id==3" class="chatgpt-icon">
          <img style="width: 20px;" src="../../assets/icon/绘画.png" alt="">
        </div>
				<div class="text">{{ item.name }}</div>
      </div>
    </div>
		
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2NewNav',
	props:['routerClass'],

	data() {
		return {
			sidebar:[
        {
          id: 1,
          icon: 'el-icon-arrow-up' ,
          name: '返回顶部',
          re:'db'
        },
        {
          id: 2,
          icon: 'el-icon-arrow-up' ,
          name: 'chatGPT聊天室',
          re:'chatGpt'

        },
        {
          id: 3,
          icon: 'el-icon-s-comment' ,
          name: 'AI绘画',
          re:'AIhh'

        },
        {
          id: 4,
          icon: 'el-icon-s-comment' ,
          name: '信息',
          re:'xx'

        },
        {
          id: 5,
          icon: 'el-icon-user' ,
          name: '好友',
          re:'hy'
        },
        {
          id: 6,
          icon: 'el-icon-edit' ,
          name: '代码在线编译器',
          re:'by'
        },
      ],
			SpanClass:''
		};
	},

	mounted() {
		
	},

	methods: {
		toTop(id){
      switch (id) {
          case 1:
          let top = document.documentElement.scrollTop || document.body.scrollTop
              // 实现滚动效果
              const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50
                if (top <= 0) {
                  clearInterval(timeTop)
                }
          }, 10)
          break;
          case 2:
          console.log('跳转至chatGpt');
            let path= this.$router.resolve({
              path: '/chat'
            });
            // 打开一个新的页面
            window.open(path.href, '_blank')
          break;
					case 3:
          console.log('跳转至chatGpt');
            let pathAI= this.$router.resolve({
              path: '/chat'
            });
            // 打开一个新的页面
            window.open(pathAI.href, '_blank')
          break;
          case 4:
          console.log('跳转至信息');
            let pathinfo= this.$router.resolve({
              path: '/chat'
            });
            // 打开一个新的页面
            window.open(pathinfo.href, '_blank')
          break;
          case 5:
          console.log('跳转至好友');
            let pathuser= this.$router.resolve({
              path: '/chat'
            });
            // 打开一个新的页面
            window.open(pathuser.href, '_blank')
          break;
          case 6:
          console.log('跳转至好友');
            let pathbyq= this.$router.resolve({
              path: '/front/index'
            });
            // 打开一个新的页面
            window.open(pathbyq.href, '_blank')
          break;
      }
    },
	},
};
</script>

<style lang="less" scoped>
// .cbNav-box{
// 	// width: 50px;
// 	// height: 250px;
// 	// background-color: rgb(211, 182, 162);
// 	position: fixed;
// 	bottom: 9%;
// 	right: 5%;
// 	z-index: 1000;
// }
// body{
//   margin: 0;
//   padding: 0;
//   font-family: "montserrat",sans-serif;
//   background: #333;
// }

.contact-info{
  position: fixed;
	bottom: 9%;
	right: 0%;
	z-index: 1000;
}

.option{
  cursor: pointer;
  position: relative;
}

.option i{
  display: block;
  width: 60px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  background: #f1f1f1;
  color: #b9b9b9;
  font-size: 20px;
  transition: 0.6s;
}

.option:hover i{
  color: #3498db;
}

.text{
  position: absolute;
  height: 60px;
  width: 200px;
  // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  background: linear-gradient(to right bottom,rgb(112, 194, 221),rgb(180, 180, 180));
  
  top: 0;
  z-index: -1;
  left: 0px;
  color: #fff;
  line-height: 60px;
  text-align: center;
  transition: 0.6s;
}

.option:hover .text{
  left:-200px;
}
.chatgpt-icon{
	width: 60px;
	height: 60px;
  background: #f1f1f1;
	display: flex;
	justify-content: center;
	align-items: center;
}

</style>